<template>
    <div :class="[{'mmv-button-outlined':outlined}, size? `mmv-button-${size}`:'']" class="mmv-button">
        <button @click="onClick" class="mmv-button__button">
            <slot></slot>
        </button>
    </div>
</template>

<script>
export default {
    props: {
        type: {
            type: String,
            default: "default",
        },
        size: {
            type: String,
            default: "default",
        },
        disabled: {
            type: [Boolean, String],
            default: false,
        },
        outlined: {
            type: [Boolean, String],
            default: false,
        },
    },
    methods: {
        onClick(evt) {
            this.$emit("click", evt);
        },
    },
};
</script>

<style lang="less">
.mmv-button {
    display: inline-block;
    cursor: pointer;
    flex-shrink: 0;
    &.is-block {
        display: block;
    }
    &&-md {
        width: 86px;
        height: 34px;
        line-height: 34px;
    }
    &&-md&-outlined {
        line-height: 32px;
    }
    &&-lg {
        width: 106px;
        height: 34px;
        line-height: 34px;
    }
    &&-lg&-outlined {
        line-height: 32px;
    }
    &-normal &__button {
        background-color: #00c3ff;
        color: #fff;
        border-radius: 4px;
        transition: 0.2s background-color;
    }
    &--disabled&-normal &__button {
        background-color: #ebebeb;
        color: #999;
        cursor: not-allowed;
    }
    &--disabled&-normal:hover &__button {
        background-color: #ebebeb;
    }
}

.mmv-button__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    font-size: inherit;
    color: inherit;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    border-radius: 0;
    font-weight: inherit;
    line-height: inherit;
}

.mmv-button-normal .mmv-button__button:hover {
    background-color: #00d5ff;
}

.mmv-button-outlined .mmv-button__button {
    background-color: #fff;
    color: #00b2ff;
    border: 1px solid #00c3ff;
    border-radius: 4px;
    transition-duration: 0.2s;
    transition-property: border-color, color;
}

.mmv-button-outlined .mmv-button__button:hover {
    border-color: #00d5ff;
    color: #00d5ff;
}

.mmv-button-outlined-secondary .mmv-button__button {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #666;
    border-radius: 4px;
}

.mmv-button-text .mmv-button__button {
    color: #999;
}
</style>